ARchitect Hello World

Hello World - your first ARchitect World!

Your first ARchitect World will be a sample called  "Hello World!" which is displayed  in the camera view. We’ve already prepared a HelloARchitectWorld.html file you can use straight away.

  1. Put HelloARchitectWorld.html file onto your webserver or a web based file hosting (e.g. Dropbox public directory) and make sure you remember the URL to the file (alternatively you can use this URL: http://www.wikitude.com/doc/HelloARchitectWorld.html)
  2. With your Android phone, launch ARchitect Mobile Viewer and open the URL

 

Now that you  have seen Hello World running on your phone,  let’s take a closer look how this works:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<!-- Important: Let the viewport cover the whole screen -->
<meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Hello World</title>

</head>

<body>

        <b>Hello World!</b>

</body>

</html>

It’s just a plain HTML file! Its content will be displayed on top of the camera feed allowing you to create a Head-up Display (HUD). Keep in mind that this is just a starting point , ARchitect will allow you to create rich Augmented Reality scene using standard JavaScript.


Note the meta tag that sets the viewport. This is a common concept for mobile sites to limit the viewport to the actual screen. It is necessary to set this otherwise it might be possible that the HTML content is rendered extremely small on iOS devices. You might change the width of 540 pixel to something that works better for your layout, but be sure to test it on each platform.

ARchitect tutorials - your new best friend

Now that you’ve got the hand of how the Hello ARchitect World works , start building your own ARchitect Worlds. We’ve prepared six tutorials, which will help you get to grips with the principles and functionalities of ARchitect. Code samples and detailed explanation are provided to help you to dive deeper into the capabilities of ARchitect.

Support Tools

The ARchitect Desktop Environment (ADE)  supports developers in analysing ARchitect code without having to test it on a mobile phone.

Check out the community forum for support on ARchitect Engine.